<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #con {

            height: 100%;
            background: salmon;
        }

        #box {
            width: 200px;
            border: 2px solid #aaa;
            margin: 20px 20px;
            float: left;
        }

        #box h4 {
            padding: 10px 0;
        }

        #box img {
            display: block;
            width: 200px;
            height: 160px;
        }

        #box p:nth-of-type(2) {
            text-decoration: line-through;
        }

        #box p:nth-of-type(3) {
            color: #f80000;
        }
    </style>

</head>

<body>
    <button id="btn">根据价格排序</button>
    <button id="btn2">根据数量排序</button>
    <button id="btn3">根据评价排序</button>
    <div id="con">
        <!-- <div id="box"> -->
        <!-- <img src="./images/honor7.jpg" alt="">
            <h4>荣耀7003</h4>
            <p>颜色：土豪金</p>
            <p>原价：￥5999.00</p>
            <p>现价：￥5808.00</p>
            <p>销量：986</p>
            <p>评价：223</p> -->
        <!-- </div> -->
    </div>

    <script>
        //实现商品列表（根据价格，销量，评价排序）
        var product = [{
            id: '001',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5899.00,
            sale: 5888.00,
            color: '土豪金',
            evaluate: 288,
            sales: 1230
        }, {
            id: '002',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3899.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 289,
            sales: 439
        }, {
            id: '003',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 438,
            sales: 908
        }, {
            id: '004',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5999.00,
            sale: 5808.00,
            color: '土豪金',
            evaluate: 223,
            sales: 986
        }, {
            id: '005',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3892.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 88,
            sales: 8798
        }, {
            id: '006',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1929.00,
            sale: 1099.00,
            color: '白色',
            evaluate: 2088,
            sales: 453
        }, {
            id: '007',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 4899.00,
            sale: 2888.00,
            color: '土豪金',
            evaluate: 2880,
            sales: 88
        }, {
            id: '008',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 5876.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 3288,
            sales: 99
        }, {
            id: '009',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 4999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 1288,
            sales: 645
        }, {
            id: '010',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5888.00,
            sale: 2899.00,
            color: '土豪金',
            evaluate: 2288,
            sales: 34
        }, {
            id: '011',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3299.00,
            sale: 978.00,
            color: '黑色',
            evaluate: 28,
            sales: 1213
        }, {
            id: '012',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1976.00,
            sale: 1899.00, //现价
            color: '白色',
            evaluate: 3243, //评价
            sales: 123 //销量
        }];

        // 商品id排序
        product.sort(function (a, b) {
            return a.id - b.id;
        })

        //循环渲染数据到页面
        function proDuct() {
            for (var i = 0; i < product.length; i++) {
                con.innerHTML += '<div id="box">' +
                    '<img src="./images/honor7.jpg" alt="">' +
                    '<h4>' + product[i].name + '</h4>' +
                    '<p> 颜色：' + product[i].color + '</p>' +
                    '<p> 原价：￥' + product[i].price + '</p>' +
                    '<p> 现价：￥' + product[i].sale + '</p>' +
                    '<p> 评价：' + product[i].evaluate + '</p>' +
                    '<p> 销量：' + product[i].sales + '</p>' +
                    '</div>'
            }
        }
        proDuct();

        // 商品的价格排序(价格从低到高)
        btn.onclick = function () {
            con.innerHTML = '';
            product.sort(function (a, b) {
                return a.sale - b.sale;
            })[0];
            proDuct();
        }
        // 商品的销量排序 (销量从高到低)
        btn2.onclick = function () {
            con.innerHTML = '';
            product.sort(function (a, b) {
                return b.sales - a.sales;
            })[0];
            proDuct();
        }
        
        // 商品的评价排序 (评价从高到低)
        btn3.onclick = function () {
            con.innerHTML = '';
            product.sort(function (a, b) {
                return b.evaluate - a.evaluate;
            })[0];
            proDuct();
        }
    </script>
</body>

</html>